<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    [#include "/includes/header.html" /]
    <title>点步微助手 - 做生意，用微助手</title>
    <!-- Flot -->
    <script src="${webctx}/resources/assets/js/plugins/flot/jquery.flot.js"></script>
    <script src="${webctx}/resources/assets/js/plugins/flot/jquery.flot.tooltip.min.js"></script>
    <script src="${webctx}/resources/assets/js/plugins/flot/jquery.flot.spline.js"></script>
    <script src="${webctx}/resources/assets/js/plugins/flot/jquery.flot.pie.js"></script>
    <script src="${webctx}/resources/assets/js/plugins/flot/jquery.flot.symbol.js"></script>
    <!-- Jvectormap -->
    <script src="${webctx}/resources/assets/js/plugins/jvectormap/jquery-jvectormap-1.2.2.min.js"></script>
    <script src="${webctx}/resources/assets/js/plugins/jvectormap/jquery-jvectormap-world-mill-en.js"></script>
    <!-- Peity -->
    <!-- <script src="${webctx}/resources/assets/js/plugins/peity/jquery.peity.min.js"></script> -->
    <script type="text/javascript"
            src="${webctx}/resources/assets/js/plugins/easypiechart/jquery.easypiechart.js"></script>
    <!-- <script src="${webctx}/resources/assets/js/plugins/sparkline/jquery.sparkline.min.js"></script> -->
</head>
<body class="fixed-sidebar full-height-layout gray-bg" style="overflow:hidden">
[#include "/includes/menus.html" /]
<div class="wrapper wrapper-content">
    <div class="row">
        <div class="col-sm-3">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <span class="label label-success pull-right">当月</span>
                    <h5>收入</h5>
                </div>
                <div class="ibox-content">
                    <h1 class="no-margins">${totalIncome}</h1>
                    <!-- <div class="stat-percent font-bold text-success">98% <i class="fa fa-bolt"></i>
                    </div> -->
                    <small>总收入</small>
                </div>
            </div>
        </div>
        <div class="col-sm-3">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <span class="label label-info pull-right">全年</span>
                    <h5>订单</h5>
                </div>
                <div class="ibox-content">
                    <h1 class="no-margins">${orderNum}</h1>
                    <div class="stat-percent font-bold text-info">20% <i class="fa fa-level-up"></i>
                    </div>
                    <small>总订单数</small>
                </div>
            </div>
        </div>
        <div class="col-sm-3">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <span class="label label-primary pull-right">全部</span>
                    <h5>总会员数</h5>
                </div>
                <div class="ibox-content">
                    <h1 class="no-margins">${buyerCount}</h1>
                    <div class="stat-percent font-bold text-navy">44% <i class="fa fa-level-up"></i>
                    </div>
                    <small>会员</small>
                </div>
            </div>
        </div>
        <div class="col-sm-3">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <span class="label label-danger pull-right">已上架商品数</span>
                    <h5>商品</h5>
                </div>
                <div class="ibox-content">
                    <h1 class="no-margins">${productCount}</h1>
                    <!-- <div class="stat-percent font-bold text-danger">38% <i class="fa fa-level-down"></i></div> -->
                    <small>商品数</small>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>订单</h5>
                    <div class="pull-right">
                        <div class="btn-group">
                            <!-- <button type="button" class="btn btn-xs btn-white active">天</button> -->
                            <button type="button" class="btn btn-xs btn-white">月报</button>
                            <!-- <button type="button" class="btn btn-xs btn-white">年</button> -->
                        </div>
                    </div>
                </div>
                <div class="ibox-content">
                    <div class="row">
                        <div class="col-sm-9">
                            <div class="flot-chart">
                                <div class="flot-chart-content" id="flot-dashboard-chart"></div>
                            </div>
                        </div>
                        <div class="col-sm-3">
                            <ul class="stat-list">
                                <li>
                                    <h2 class="no-margins">${orderNum}</h2>
                                    <small>订单总数</small>
                                    <!-- <div class="stat-percent">48% <i class="fa fa-level-up text-navy"></i></div> -->
                                    <div class="progress progress-mini">
                                        <div style="width: 48%;" class="progress-bar"></div>
                                    </div>
                                </li>
                                <!-- <li>
                                    <h2 class="no-margins ">4,422</h2>
                                    <small>最近一个月订单</small>
                                    <div class="stat-percent">60% <i class="fa fa-level-down text-navy"></i>
                                    </div>
                                    <div class="progress progress-mini">
                                        <div style="width: 60%;" class="progress-bar"></div>
                                    </div>
                                </li>
                                <li>
                                    <h2 class="no-margins ">9,180</h2>
                                    <small>最近一个月销售额</small>
                                    <div class="stat-percent">22% <i class="fa fa-bolt text-navy"></i>
                                    </div>
                                    <div class="progress progress-mini">
                                        <div style="width: 22%;" class="progress-bar"></div>
                                    </div>
                                </li> -->
                            </ul>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>
[#include "/includes/footer.html" /]
<script type="text/javascript">
    function gd(year, month, day) {
        return new Date(year, month - 1, day).getTime();
    }

    var searchdata = function () {
        $.post(obz.ctx + "/chartData", {}, function (json) {
            var dataMap = json.data;
            var dataList1 = dataMap.data1;//已支付订单数
            var dataList2 = dataMap.data2;//总订单数
            //if(dataList1.length>0 && dataList2.length>0){
            $("#flot-dashboard-chart").empty();
            var data1 = new Array();
            var data2 = new Array();
            for (var i = 0; i < dataList1.length; i++) {
                var obj = [];
                obj.push(gd(dataList1[i].year, dataList1[i].month, dataList1[i].day));
                obj.push(dataList1[i].incomeNum);
                data1.push(obj);
            }
            for (var i = 0; i < dataList2.length; i++) {
                var obj = [];
                obj.push(gd(dataList2[i].year, dataList2[i].month, dataList2[i].day));
                obj.push(dataList2[i].incomeNum);
                data2.push(obj);
            }
            $('.chart').easyPieChart({
                barColor: '#f8ac59',
                //                scaleColor: false,
                scaleLength: 5,
                lineWidth: 4,
                size: 80
            });

            $('.chart2').easyPieChart({
                barColor: '#1c84c6',
                //                scaleColor: false,
                scaleLength: 5,
                lineWidth: 4,
                size: 80
            });
            var dataset = [
                {
                    label: "总订单数",
                    data: data1,
                    color: "#1ab394",
                    bars: {
                        show: true,
                        align: "center",
                        barWidth: 24 * 60 * 60 * 600,
                        lineWidth: 0
                    }

                }, {
                    label: "以付款数",
                    data: data2,
                    yaxis: 2,
                    color: "#464f88",
                    lines: {
                        lineWidth: 1,
                        show: true,
                        fill: true,
                        fillColor: {
                            colors: [{
                                opacity: 0.2
                            }, {
                                opacity: 0.2
                            }]
                        }
                    },
                    splines: {
                        show: false,
                        tension: 0.6,
                        lineWidth: 1,
                        fill: 0.1
                    },
                }
            ];


            var options = {
                xaxis: {
                    mode: "time",
                    tickSize: [3, "day"],
                    tickLength: 0,
                    axisLabel: "Date",
                    axisLabelUseCanvas: true,
                    axisLabelFontSizePixels: 12,
                    axisLabelFontFamily: 'Arial',
                    axisLabelPadding: 10,
                    color: "#838383"
                },
                yaxes: [{
                    position: "left",
                    // max: ,
                    color: "#838383",
                    axisLabelUseCanvas: true,
                    axisLabelFontSizePixels: 12,
                    axisLabelFontFamily: 'Arial',
                    axisLabelPadding: 3
                }, {
                    position: "right",
                    clolor: "#838383",
                    axisLabelUseCanvas: true,
                    axisLabelFontSizePixels: 12,
                    axisLabelFontFamily: ' Arial',
                    axisLabelPadding: 67
                }
                ],
                legend: {
                    noColumns: 1,
                    labelBoxBorderColor: "#000000",
                    position: "nw"
                },
                grid: {
                    hoverable: false,
                    borderWidth: 0,
                    color: '#838383'
                }
            };
            $.plot($("#flot-dashboard-chart"), dataset, options);
            //}
        });
    }

    $(document).ready(function () {
        searchdata();
    });

    Template.init("#menu-home");
</script>
</body>
</html>	